<template>
  <el-dialog
    append-to-body
    :title="title"
    :visible.sync="dialogFormVisible"
    width="520px"
    @close="close"
  >
    <div class="title">提示：{{ title }}后账单将显示在完成账单中。</div>
    <div class="body">
      <div class="text">
        <div>
          <span>费用名称</span>
          <span>{{ detail.bill_title }}</span>
        </div>
        <div>
          <span>账单金额</span>
          <span v-if="detail.bill_type == 'income'">
            +{{ detail.bill_money }}元
          </span>
          <span v-else-if="detail.bill_type == 'payed'">
            -{{ detail.bill_money }}元
          </span>
        </div>
        <div>
          <span v-if="type == 'rent'">待收日期</span>
          <span v-else-if="type == 'owner'">待付日期</span>
          <span>{{ detail.bill_date }}</span>
        </div>
      </div>
      <el-form ref="form" :model="form">
        <el-form-item label="备注">
          <el-input
            v-model="form.bill_desc"
            maxlength="150"
            placeholder="请填写备注信息"
            :rows="5"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="凭证图片">
          <images-upload
            ref="imagesUpload"
            :image="form.bill_images"
            :limit="3"
            :max="10"
            @onChange="getImages"
          />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确认{{ title }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { setPayed } from '@/api/bill'
  import { setOwnerPayed } from '@/api/ownerBill'
  import imagesUpload from '@/components/imagesUpload'
  export default {
    name: 'SetPayed',
    components: { imagesUpload },
    data() {
      return {
        form: {
          bill_id: '',
          bill_images: '',
          bill_desc: '',
        },
        type: '',
        detail: {},
        title: '',
        dialogFormVisible: false,
      }
    },
    methods: {
      showEdit(type, e) {
        console.log(type, e)
        if (type == 'rent') {
          this.title = '收款'
        } else if (type == 'owner') {
          this.title = '付款'
        }
        this.type = type
        this.detail = e
        this.form.bill_id = e.id
        this.dialogFormVisible = true
      },
      getImages(e) {
        this.form.bill_images = e.join(',')
      },
      close() {
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.edit()
          }
        })
      },
      async edit() {
        if (this.type == 'rent') {
          const { data } = await setPayed(this.form)
          if (data.is_success) {
            this.$baseMessage('收款成功', 'success', 'vab-hey-message-success')
            this.$emit('fetch-data')
            this.close()
          }
        } else if (this.type == 'owner') {
          const { data } = await setOwnerPayed(this.form)
          if (data.is_success) {
            this.$baseMessage('付款成功', 'success', 'vab-hey-message-success')
            this.$emit('fetch-data')
            this.close()
          }
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-dialog__body {
    padding: 0;
  }
  .title {
    text-align: center;
    line-height: 38px;
    background: #fff9eb;
    color: #f5961e;
  }
  .body {
    padding: 10px 20px;
    .text {
      display: flex;
      justify-content: space-between;
      padding: 6px 10px;
      line-height: 32px;
      background: #f0f7ff;
      border-radius: 6px;
      margin-bottom: 18px;
      span {
        margin-right: 10px;
      }
    }
    .el-form-item {
      padding: 10px;
      background: #f0f7ff;
      border-radius: 6px;
    }
  }
</style>
